<template>
    <div id="login">
        <div class="left">
            <img :src="subStation && subStation.fenzhan_datu" alt="">
        </div>
        <div class="right">

            <div class="form">
                <div class="logo">
                    <img :src="subStation && subStation.fenzhan_logo" alt="">
                </div>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="创建新账号" name="first">
                        <div class="padder-v text-center m-t-lg m-b-lg">
                            <el-button type="primary" @click="createQQAccount">创建新账号</el-button>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="绑定现有账号" name="second">
                        <el-form label-position="top" :rules="loginRules" ref="loginForm" label-width="80px"
                                 @submit.native.prevent
                                 :model="loginForm">
                            <el-form-item label="账号" prop="zhanghao">
                                <el-input v-model="loginForm.zhanghao"
                                          placeholder="登录账号"

                                          prefix-icon="el-icon-user"
                                ></el-input>
                            </el-form-item>
                            <el-form-item label="密码" prop="mima">
                                <el-input v-model="loginForm.mima"

                                          placeholder="登录密码"
                                          type="password"
                                          prefix-icon="el-icon-unlock"

                                ></el-input>
                            </el-form-item>
                            <!--<div class="footer">
                                <el-checkbox v-model="checked">记住密码</el-checkbox>
                                <el-button type="text">忘记密码?</el-button>
                            </div>-->
                            <el-button class="submit" native-type="submit" type="primary"
                                       @keyup.enter.native="loginHandel" :loading="loginLoading" @click="loginHandel">绑定
                            </el-button>
                            <!--<div class="m-t padder ">
                                <el-divider>
                                    <svg @click="qqLogin" t="1562247580320" class="icon" viewBox="0 0 1024 1024"
                                         version="1.1"
                                         xmlns="http://www.w3.org/2000/svg" p-id="2029" width="30" height="30">
                                        <path d="M68.399765 590.615655c-37.073602 90.765025-43.465533 176.418105-14.062849 191.757941 20.45478 11.505876 53.692423-14.061849 84.374094-60.084355 11.504876 51.135451 42.186547 95.87897 84.373094 132.952572-44.743519 16.619821-74.146204 44.743519-74.146204 75.42519 0 51.135451 79.259149 93.321998 176.418105 93.321997 88.208052 0 161.07627-33.237643 175.138119-77.982162h20.45478C535.009753 990.751357 607.87897 1023.989 696.087023 1023.989c98.436943 0 176.418105-40.908561 176.418104-93.321997 0-30.68167-29.402684-58.806368-74.146203-75.42519 42.186547-37.073602 72.868217-81.817121 84.374094-132.952572 30.68067 46.022506 62.640327 71.589231 84.373093 60.084355 30.68167-15.339835 24.289739-102.270901-14.061849-191.757941-29.403684-70.311245-69.033258-122.725682-99.714929-134.230558 0-3.835959 1.278986-8.949904 1.278987-14.062849 0-26.845712-7.669918-52.413437-20.454781-72.868217v-5.112945c0-12.783863-2.555973-24.289739-7.669917-34.516629C818.813704 145.736434 701.200968 0 510.722014 0 320.24206 0 202.630323 145.736434 194.959406 329.824457c-5.112945 10.22689-7.669918 21.732767-7.669918 34.516629v5.112945c-12.783863 20.45478-20.45478 46.022506-20.45478 72.869217v14.061849c-28.123698 11.504876-69.032258 62.640327-98.434943 134.230558z"
                                              fill="#4CAFE9" p-id="2030"></path>
                                    </svg>
                                </el-divider>
                            </div>-->
                        </el-form>
                    </el-tab-pane>


                </el-tabs>


            </div>
        </div>
    </div>
</template>

<script>
    import {mapMutations, mapGetters} from 'vuex'

    export default {
        name: 'login',
        components: {},
        data() {
            //验证重复密码
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registerForm.mima) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };

            return {
                //注册/登录面板控制
                activeName: 'first',
                checked: true,
                time: 59,
                timer: null,
                timerText: '获取验证码',
                sendMsgLoading: false,
                imgCodeSrc: '/public/index.php/captcha.html',
                //登录表单
                loginForm: {
                    zhanghao: '',
                    mima: '',
                },
                loginRules: {
                    zhanghao: [
                        {required: true, message: '请输入用户名', trigger: 'blur'},
                        {min: 5, message: '账号长度不能小于5个字符', trigger: 'blur'},
                    ],
                    mima: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 6, message: '密码长度不能小于6个字符', trigger: 'blur'},
                    ],
                },
                //登录loading
                loginLoading: false,
                //绑定login
                createLoading: false
            }
        },
        computed: {
            ...mapGetters(['subStation'])
        },
        methods: {
            ...mapMutations(['SET_TOKEN']),
            //登录
            loginHandel() {
                this.$refs['loginForm'].validate(valid => {
                    if (valid) {
                        this.loginLoading = true;
                        this.$axios.post('/api/Start/qq_account_binding', this.loginForm)
                            .then(res => {
                                this.loginLoading = false;
                                if (res.code == '200') {
                                    this.$message.success('绑定成功');
                                    this.$router.push('/')

                                }

                            })
                    }
                })


            },
            //创建新账号
            createQQAccount() {
                this.createLoading = true;
                this.$axios.get(`/api/Start/qq_account_create`)
                    .then(res => {
                        this.createLoading = false;
                        if (res.code == 200) {
                            this.$message.success('创建成功');
                            this.$router.push('/')
                        }
                    })
            }

        },
        mounted() {


        },
    }
</script>

<style lang="less" scoped>
    .icon {
        cursor: pointer;
    }

    @media (max-width: 1170px) {
        .left {
            display: none;
        }

        .right {
            padding: 0
        }
    }

    #login {
        height: 100vh;
        position: relative;

        .left {
            width: 420px;
            height: 100%;
            background: #f7f9fc;
            position: fixed;
            left: 0;
            top: 0;
            cursor: pointer;

            img {
                width: 100%;
            }
        }

        .right {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 0 100px;

            .form {
                width: 320px;

                .logo {
                    img {
                        width: 110px;
                        margin: 0 auto;
                        display: block;
                    }
                }

                .footer {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .submit {
                    margin-top: 20px;
                    width: 100%;
                }

                .imgCode {
                    /deep/ .el-input-group__append {
                        padding: 0 10px;
                        cursor: pointer;

                        img {
                            width: 95px;
                        }
                    }
                }

                /deep/ .el-form-item__label {
                    font-size: 16px;
                }

                /deep/ .el-form-item {
                    margin-bottom: 8px;
                }

                /deep/ .el-tabs__nav-wrap {
                    &::after {
                        display: none;
                    }

                    .el-tabs__item {
                        font-size: 18px;
                        margin-top: 15px;
                        font-weight: 700;
                        color: #e1e1e3;

                        &.is-active {
                            color: rgb(8, 38, 88);
                        }
                    }

                    .el-tabs__active-bar {
                        background-color: rgb(8, 38, 88);
                    }

                }
            }
        }
    }
</style>
